import Base from "../base.js";
import SchedulesApi from "../../api/schedules.js";
import _ from "lodash";



const sortMovieProps = [
    {
        name: "电影名",
        key: "movieId"
    },
    {
        name: "影院",
        key: "cinemasId"
    },
    {
        name: "放映厅",
        key: "theaterId"
    },

    {
        name: "放映时间",
        key: "showTime"
    },
    {
        name: "价格",
        key: "price"
    },


]

export default class extends Base {
    laydate = layui.laydate;
    form = layui.form;
    // 初始化数据
    data = {
        movies: [],
        cinemas: [],
        theaters: [],
        theatersID: ``,
    }
    // 新增排片初始数据
    sortMovieData = {
        movieId: "",
        cinemasId: "",
        theaterId: "",
        showTime: "",
        price: ""
    }
    render() {
        this.$el.html(`
        <div>
            <h1 style="margin:20px 0px 20px 50px">新增排片</h1>
            <table>
                <tbody>
                ${sortMovieProps.map(item => {
            if (item.key == "showTime") {
                return `
                    <tr>
                        <td>
                            <label class="layui-form-label">${item.name}：</label>
                        </td>
                        <td>
                            <div class="layui-input-inline">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <input type="text" name="${item.key}" lay-verify="title" id="showTime" placeholder="yyyy-MM-dd HH:mm:ss"  class="layui-input"  style="width:220px;">
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                        `
            } else if (item.key == "price") {
                return `
                    <tr>
                        <td>
                            <label class="layui-form-label">${item.name}：</label>
                        </td>
                        <td>
                            <div class="layui-input-inline">
                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <input type="text" name="${item.key}" lay-verify="title" autocomplete="off" placeholder="请输入价格" class="layui-input" style="width:220px;">
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
            `
            }
            return `
                    <tr>
                        <td>
                            <label class="layui-form-label">${item.name}：</label>
                        </td>
                        <td>
                            <div class="layui-form-item">
                                <form class="layui-form">
                                    <select name="quiz1" class="${item.key}" lay-filter="${item.key}"></select>
                                </form>
                            </div>
                        </td>
                    </tr>
                `

        }).join("")}
                        <tr>
                            <td></td>
                            <td>
                                <button class="save-btn layui-btn" >新增排片</button></td> 
                            </td>
                        </tr>
                </tbody>
            </table>
        </div>
        `);
        this.$cinemasIdEle = $(".cinemasId");
        this.$theaterIdEle = $(".theaterId");
        this.$movieIdEle = $(".movieId");
        this.$showTimeEle = $("input[name=showTime]");
        this.$priceEle = $("input[name=price]");
        this.$saveBtn = $(".save-btn");
    };

    // 提交按钮
    async saveBtn() {
        // 获取放映时间的数据
        this.sortMovieData.showTime = this.$showTimeEle.val();
        this.sortMovieData.movieId = this.$movieIdEle.val();
        this.sortMovieData.theaterId = this.$theaterIdEle.val();
        await SchedulesApi.addSchedules(this.sortMovieData);
        this.layer.msg(`新增成功`, { icon: 1, time: 1500 })
    }
    // 价格input事件
    priceChange(e) {
        this.sortMovieData.price = e.target.value;
    }
    // 下拉按钮添加chagne是事件
    formChange() {
        this.form.on("select(cinemasId)", () => {
            const data = this.$cinemasIdEle.next().children().eq(1).children();
            const result = [...data].filter(item => $(item).attr("class") == "layui-this");
            this.sortMovieData.cinemasId = $(result).attr("lay-value");
            this.changeTheaters($(result).attr("lay-value"));
        })
    }



    handle() {
        // 提交按钮
        this.$saveBtn.on("click", this.saveBtn.bind(this))
        // 价格添加事件
        this.$priceEle.on("input", this.priceChange.bind(this));
        this.formChange();

        // 表单添加日期表单
        this.laydate.render({
            elem: '#showTime',
            type: 'datetime',
        })
    }
    // 点击重新渲染放映厅
    async changeTheaters(value) {
        this.data.theatersID = value;
        // 根据影院数据获取对应的放映厅
        this.data.theaters = await SchedulesApi.getTheaters(this.data.theatersID);
        this.$theaterIdEle.html(
            _.map(this.data.theaters, v => {
                return `<option value="${v._id}">${v.theatersName}</option>>`
            })
        );
        this.form.render()

    }

    async rerender() {
        // 渲染电影数据
        this.$movieIdEle.html(
            _.map(this.data.movies, v => {
                return `<option value="${v._id}">${v.name}</option>>`
            })
        );
        // 渲染影院数据
        this.$cinemasIdEle.html(
            _.map(this.data.cinemas, (v, k) => {
                if (k == 0) {
                    return `<option value="${v._id}">${v.name}</option>`
                } else {
                    return `<option value="${v._id}">${v.name}</option>`
                }
            })

        )
        // 根据影院数据渲染对应的放映厅
        this.$theaterIdEle.html(
            _.map(this.data.theaters, v => {
                return `<option value="${v._id}">${v.theatersName}</option>`
            })
        );
        this.form.render()

    }

    async get() {
        // 获取电影数据
        this.data.movies = await SchedulesApi.getMovie();
        // 获取影院数据
        this.data.cinemas = await SchedulesApi.getCinemas();
        this.data.theatersID = this.data.cinemas[0]._id;
        // 根据影院的_id找到拥有的放映厅
        this.data.theaters = await SchedulesApi.getTheaters(this.data.theatersID);
        // 添加排片默认电影数据
        this.sortMovieData.movieId = this.data.movies[0]._id;
        this.sortMovieData.cinemasId = this.data.cinemas[0]._id;
        this.sortMovieData.theaterId = this.data.theaters[0]._id;
    }

    async mounted() {
        await this.get();
        this.rerender();
    }

}

